<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { addDetails, detailsList } from '@/views/psychology/details/getDetails';
import { useRoute } from 'vue-router';

const add = ref(false);
const update = ref(false);
const input = ref('');
// do not use same name with ref
// detailsList(id).then(res => {
//     console.log(res);
// });

const question = ref({
    assessmentId: null,
    title: '',
    sort: null,
    option: [{
        optname: '',
        content: '',
        score: null
    }]
})

const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: ''
});
// 渲染表格
const tableData = ref([]);

// 接收参数
const route = useRoute();
console.log(route.query);
const data = route.query;

// 渲染列表
function page() {
    detailsList(data.id).then(res => {
        console.log(res);
        tableData.value = res.data;

    });
}

page();

//添加
const addVisible = ref(false);

function addBtn() {
    addVisible.value = true;
}

const addData=ref({

})
function addSave() {
    addDetails(addData.value).then(res=>{
        console.log(res);
    })
    addVisible.value=false
}

const selectArr = ref([])
function addSelect() {
    console.log(123);
    // selectArr.value.push({
    //     optname: selectArr.value[selectArr.value.length - 1].optname + 1,
    //     content: '',
    //     score: null
    // })
}

</script>

<template>
    <div class='container'>
        <header>
            <span><b>题目名称</b></span>
            <el-form :model='form' label-width='auto' style='max-width: 300px'>
                <el-form-item>
                    <el-input v-model='question.title' placeholder='请输入题目名称' />
                </el-form-item>
            </el-form>
        </header>
        <section>
            <el-button type='primary' @click='addBtn'>添加</el-button>
            <el-button type='primary' @click='update = true'>导入</el-button>

            <!--导入对话框-->
            <el-dialog v-model='addVisible' title='编辑' width='1000'>
                <!--内容-->
                <div class='title'>
                    题目内容
                </div>
                <el-input
                    v-model='textarea'
                    maxlength='200'
                    style='width: 100%;outline: none'
                    placeholder='请输入题目内容'
                    type='textarea'
                    :autosize='{ minRows: 2, maxRows: 3 }'
                    resize='none'

                />
                <div class='title'>
                    选项内容
                </div>
                <div class='selectBox'>
<!--                    <div class='option' v-for='(item,index) in selectArr' :key='index'>-->
<!--                        <p>{{item.optname}}</p>-->
<!--                        <el-input v-model='input' style='width: 70%' placeholder='请输入内容' />-->
<!--                        <el-input v-model='input' style='width: 20%' placeholder='请填写分数' />-->
<!--                        <el-icon size='30px' color='#ccc'>-->
<!--                            <CircleCloseFilled />-->
<!--                        </el-icon>-->
<!--                    </div>-->

                    <div class='option' >
                        <p>A</p>
                        <el-input v-model='input' style='width: 70%' placeholder='请输入内容' />
                        <el-input v-model='input' style='width: 20%' placeholder='请填写分数' />
                        <el-icon size='30px' color='#ccc'>
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                    <div class='option' >
                        <p>B</p>
                        <el-input v-model='input' style='width: 70%' placeholder='请输入内容' />
                        <el-input v-model='input' style='width: 20%' placeholder='请填写分数' />
                        <el-icon size='30px' color='#ccc'>
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                    <div class='option' >
                        <p>C</p>
                        <el-input v-model='input' style='width: 70%' placeholder='请输入内容' />
                        <el-input v-model='input' style='width: 20%' placeholder='请填写分数' />
                        <el-icon size='30px' color='#ccc'>
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                    <div class='option' >
                        <p>D</p>
                        <el-input v-model='input' style='width: 70%' placeholder='请输入内容' />
                        <el-input v-model='input' style='width: 20%' placeholder='请填写分数' />
                        <el-icon size='30px' color='#ccc'>
                            <CircleCloseFilled />
                        </el-icon>
                    </div>

                </div>
                <div class='addop'>
                    <el-button type='primary' @click='addSelect'>
                        新增
                    </el-button>
                </div>
                <!--底部-->
                <template #footer>
                    <div class='dialog-footer' align='center'>
                        <el-button @click='addVisible = false'>取消</el-button>
                        <el-button type='primary' @click='addSave'>
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <!--导入对话框-->
            <el-dialog v-model='update' title='测评信息导入' width='400' align='center'>
                <!--内容-->
                <el-upload
                    class='upload-demo'
                    drag
                    action='https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15'
                    multiple
                >
                    <el-icon class='el-icon--upload'>
                        <upload-filled />
                    </el-icon>
                    <div class='el-upload__text'>
                        将文件拖到此处或 <em>点击上传</em>
                    </div>
                    <template #tip>
                        <div class='el-upload__tip'>
                            仅允许导入xls、xlsx格式文件 <a href='#'>下载模板</a>
                        </div>
                    </template>
                </el-upload>
            </el-dialog>
        </section>
        <el-table :data='tableData'>
            <el-table-column fixed prop='date' type='index' label='序号' width='150' align='center' />
            <el-table-column prop='title' label='题目名称' width='120' align='center' />
            <el-table-column prop='status' label='状态' align='center' />
            <el-table-column fixed='right' label='操作' width='200' align='center'>
                <template #default>
                    <el-button link type='primary' size='small'>编辑</el-button>
                    <el-button link type='primary' size='small'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style lang='scss'>

.option {
    display: flex;
    line-height: 32px;
    justify-content: space-evenly;
    margin:10px 0 ;
    i{
        margin-top: 10px;
    }
    p{
        margin: 10px 0;
    }
}

.addop {
    text-align: center;
    margin-top: 20px;
}

i {
    cursor: pointer;
}

.headerCard {
    width: 100%;
    border: 2px solid #ccc;
}

.selectBox {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;

}

.title {
    width: 100%;
    padding: 10px;
    font-weight: bold;
    border: 1px solid #ccc;
    z-index: 1;
    position: relative;
    top: 5px;
    background-color: #EDEDED;
    margin-top: 10px;
}

a {
    color: #51A7FF;
}

p {
    line-height: 32px;
}

.container {
    padding: 40px
}

header {

    display: flex;
    line-height: 32px;

    span {
        margin-right: 10px;
        font-size: 15px;
    }
}

section {
    margin: 20px 0;
}
</style>
